<template>
  <div class="add">
    <el-breadcrumb separator="/" class="add_box">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>班次管理</el-breadcrumb-item>
        <el-breadcrumb-item>新增班次_固定班次</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="top">
        基本设置
      </div>

      <div class="Basic_Settings">
          <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="120px">
          
            <el-form-item label="班次类型:" prop="resource">
                  <el-radio-group v-model="form.resource">
                    <el-radio label="固定班次" />
                    <el-radio label="弹性班次" />
                    <el-radio label="小时工班次" />
                  </el-radio-group>
            </el-form-item>
          
            <el-form-item label="班次名称:" prop="name1">
                <el-input v-model="form.name1" />
            </el-form-item> 

            <el-form-item label="班次简称:" style="margin-top:15px" prop="name2">
                <el-input v-model="form.name2" />
            </el-form-item> 
            
            <el-form-item label="备注:" prop="desc">
              <el-input v-model="form.desc" type="textarea" />
            </el-form-item>
  
            <el-form-item label="工作时间" style="margin-bottom:10px" prop="region">
              <el-select v-model="form.region" placeholder="please select your zone">
                <el-option label="09:00-18:00" value="09:00-18:00" />
                <el-option label="08:00-17:00" value="08:00-17:00" />
                <el-option label="07:00-16:00" value="07:00-16:00" />
              </el-select>
            </el-form-item>

          <div class="active_bottom">
              <el-form-item>
              <el-button @click="fund">返回</el-button>    
              <el-button @click="funb">取消</el-button>
              <el-button type="primary" @click="onSubmit(form.name1,form.name2,form.resource,form.region)">保存</el-button>
              </el-form-item> 
          </div>

        </el-form>
      </div>
  </div>
</template>

<script setup>
import { ElNotification } from "element-plus";
import { onMounted, ref } from 'vue'
import * as service from "@/api/lei/lei";
// 表单校验时要定义：ruleFormRef
var ruleFormRef = ref();
// 表单验证的数据
var rules = ref({
  name1: [{ required: true, message: "请编入分组名称", trigger: "blur" }],
  name2: [{ required: true, message: "请输入适用范围", trigger: "blur" }],
  resource: [{ required: true, message: "请选择班次", trigger: "blur" }],
  region: [{ required: true, message: "请选择班次", trigger: "blur" }],
});
// 引入路由
import { useRouter } from "vue-router";
var $router = useRouter()

const form = ref({
  name1: '',
  name2: '',
  region: '09:00-18:00',
  delivery1: false,
  delivery2: false,
  type: [],
  resource: '固定班次',
})

// 取消按钮
var funb =()=>{
   
}
// 编辑按钮
var func =()=>{
    
}
// 返回按钮（返回班次管理页面）
var fund =()=>{
    $router.push('/index/banci_manage')
}
// 保存按钮，发送添加请求
const onSubmit = (Bcname,Bcjian,Bclei,Bctime) => {
  //       console.log(KQname,KQrange,KQdate,KQbc,KQway);  
  var BcshiC =  8 
  var BCtian =  1      
  ruleFormRef.value.validate(async(valid, fields) => {
          if (valid) {
            var res = await service.BCGL_add({Bcname,Bcjian,Bclei,Bctime,BcshiC,BCtian})
            if (res.status===201) {
                  ElNotification({
                      title: "通知",
                      message: "班次添加成功",
                      type: "success",
                      duration: 2000,
                    });
            $router.push('/index/banci_manage')
              }
          } else {
            console.log('error submit!', fields)
          }
        })    
}
</script>

<style scoped lang='scss'>
.add{
    height:500px ;
    ::-webkit-scrollbar{
        overflow: hidden;
    }
  
    .add_box{
        padding: 10px 15px;
        font-size: 14px;
    } 
    .top{
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        border-bottom: 1px solid #f5f5f5;
        padding:  10px 15px;
        font-weight: bold;
        }
    .Basic_Settings{ 
        width: 1100px;
        height: 500px;
        margin-top: 10px;
        box-sizing: border-box;
        .el-form-item{
            margin: 0;
        }
        .active_box{
            display: flex;
        }
        :deep(.el-input){
            width: 500px !important;
        }
        :deep(.el-input--suffix){
            width: 200px !important;
        }
        :deep(.el-form-item__label){
            width: 160px !important;
        }
        .active_bottom{
            margin-top: 0px;
        }
        .moren{
            margin-left: 150px;
            div{
                margin: 10px 0;
                font-size: 12px;
                color: #211f1f;
            }
        }
        :deep(.el-textarea__inner){
          width: 500px !important;
          margin: 15px 0;
        }
       .xuanze{
        margin-left: 160px;
       }
    }
}

</style>